<div class="layui-fluid">
    <div class="layui-row layui-col-space15">
        <div class="layui-col-md12">
            <div class="layui-row layui-col-space15">
                <div class="layui-col-md15">
                    <div class="layui-row layui-col-space15">
                        <div class="layui-col-md12">
                            <div class="layui-card">
                                <div class="layui-card-header">版本管理</div>
                                <div class="layui-card-body">
                                    <table id="codeTable" lay-filter="codeTable"></table>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

            </div>
        </div>
    </div>
</div>
<div class="layui-content" id="addCodeBox" style="display: none">
    <div class="layui-card" style="height: 100%">
        <div class="layui-card-header">新增版本信息</div>
        <form class="layui-form layui-card-body" action="">
            <div class="layui-form-item">
                <label class="layui-form-label">名称：</label>
                <div class="layui-input-block">
                    <input name="name" class="layui-input" type="text" placeholder="请输入版本名称" autocomplete="off"
                           lay-verify="name" id="addName">
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">版本：</label>
                <div class="layui-input-block">
                    <input name="ver" id="addVer" class="layui-input" type="number" placeholder="请输入版本"
                           autocomplete="off" lay-verify="ver">
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">地址：</label>
                <div class="layui-input-block">
                    <input name="addAddr" class="layui-input" id="addAddr" type="text" placeholder="请输入地址"
                           autocomplete="off" lay-verify="addr">
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">场景：</label>
                <div class="layui-input-block">
                    <input name="addScene" id="addScene" class="layui-input" type="text" placeholder="请输入场景"
                           autocomplete="off" lay-verify="scene">
                </div>
            </div>
        </form>
        <div class="layui-row layui-col-space12">
            <div class="layui-col-md12" style="text-align: center">
                <div class="layui-card-body" id="message">
                </div>
            </div>
        </div>
    </div>
    <div class="layui-form-item">
        <div class="layui-input-block" style="float: right;right: 50px">
            <a class="layui-btn layui-btn-blue" id="addActive" onclick="addVersion()" lay-submit
               lay-filter="updatePerson">立即添加</a>
        </div>
    </div>
</div>
</div>
<div class="layui-content" id="updateBox" style="display: none">
    <div class="layui-card" style="height: 100%">
        <div class="layui-card-header">修改版本信息</div>
        <form class="layui-form layui-card-body" action="" lay-filter="updateVer">
            <div class="layui-form-item">
                <label class="layui-form-label">名称：</label>
                <div class="layui-input-block">
                    <input name="updateName" class="layui-input" type="text" placeholder="请输入版本名称" autocomplete="off"
                           lay-verify="updateName" id="updateName">
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">版本：</label>
                <div class="layui-input-block">
                    <input name="updaterVer" id="updaterVer" class="layui-input" type="number" placeholder="请输入版本"
                           autocomplete="off" lay-verify="updaterVer">
                </div>
            </div>
        </form>

    </div>
    <div class="layui-form-item">
        <div class="layui-input-block" style="float: right;right: 50px">
            <a class="layui-btn layui-btn-blue" id="saveVersion" onclick="saveVersion()" lay-submit
               lay-filter="saveVersion">保存</a>
        </div>
    </div>
</div>
</div>
<script id="toolbarDemo" type="text/html">
    <div class="layui-btn-container">
<!--        <button class="layui-btn layui-btn-sm layui-btn-primary" onclick="addCode()"><i class="layui-icon">&#xe608;</i>-->
<!--            新增激活码-->
<!--        </button>-->
        <button class="layui-btn layui-btn-sm layui-btn-normal" onclick="refresh()"><i class="layui-icon">&#xe9aa;</i>
            刷新
        </button>
    </div>
</script>
<script type="text/html" id="barDemo">
    <a class="layui-btn layui-btn-xs layui-btn-primary" lay-event="editVersion"><i class="layui-icon">&#xe642;</i>修改</a>
    <a class="layui-btn layui-btn-xs  layui-btn-danger" lay-event="delVersion">删除</a>
</script>
<script>
    var startInter = api.edition;
    var type = /^[1-9]\d*$/;
    var vid, vname, vver, vaddr, vscene;
    $(document).ready(function () {
        $("#search").click(function () {
            getStartUp();
        });
        getStartUp();
    });

    function addCode() {
        personWin = layer.open({
            type: 1,
            shade: false,
            area: ['50%', '50%'], //宽高
            title: false, //不显示标题
            content: $('#addCodeBox'),
            cancel: function () {
                document.getElementById("addCodeBox").style.display = "none";
            }

        });
    }

    function refresh() {
        getStartUp();
    }

    //获取启动次数的数据
    function getStartUp() {
        layui.use('table', function () {
            var table = layui.table;
            //第一个实例
            table.render({
                elem: '#codeTable'
                , url: startInter //数据接口
                , title: '激活码列表数据'
                , page: true //开启分页
                , toolbar: "#toolbarDemo"
                , method: 'post'
                , limit: 20
                , limits: [20, 40, 60, 100]
                , where: {
                    action: "listVersion",
                }
                , cols: [[ //表头
                    {field: 'index', title: '序号', fixed: 'left', type: 'numbers', toolbar: "#tableId"}
                    , {field: 'name', title: '名称', width: 150}
                    , {field: 'ver', title: '版本号', width: 150}
                    , {field: 'createTime', title: '创建时间', toolbar: "#createTime"}
                    , {field: '', toolbar: '#barDemo', title: '操作'}

                ]]
                , done: function (res, curr, count) {
                    if (res.count == 0) {
                        layer.msg("没有符合条件的数据哦");
                    }
                }

            });
            //监听行工具事件
            table.on('tool(codeTable)', function (obj) {
                var data = obj.data //获得当前行数据
                    , layEvent = obj.event; //获得 lay-event 对应的值
                if (layEvent === 'editVersion') {
                    vid = $id = data.id;//获取当前一行的id
                    vaddr = $addr = data.addr;
                    vname = $name = data.name;
                    vscene = $scene = data.scene;
                    vver = $ver = data.ver;

                    undateVersion($id, $name, $ver, $addr, $scene);
                }
                else if (layEvent === 'delVersion') {
                    $id = data.id;
                    layer.confirm("确定丢弃吗？", function () {
                        delVersion($id);
                    });


                }
            });


        });

    }

    //新增版本信息
    function addVersion() {
        $name = $("#addName").val();
        $ver = $("#addVer").val();
        $addr = $("#addAddr").val();
        $scene = $("#addScene").val();
        if ($name.length > 0 && $ver.length > 0 && $addr.length > 0 && $scene.length > 0) {


            $.ajax({
                type: "post",
                cache: "false",
                url: startInter,
                data: {
                    "action": "addVersion",
                    "name": $name,
                    "ver": $ver,
                    "addr": $addr,
                    "scence": $scene
                },
                dataType: 'json',
                success: function (res) {
                    layer.msg("添加成功");
                    $("#addCodeBox").css({"display": "none"});
                    parent.layer.close(personWin);
                    getStartUp();
                },
                error: function (res) {
                    console.log(res);
                    layer.msg("添加失败");
                }


            })

        }
        else {

            layer.msg('还有必填项没有填或填写错误哦！', {time: 5000, icon: 0});


        }


    }


    //修改版本信息
    function undateVersion(id, name, ver) {
        personWin = layer.open({
            type: 1,
            shade: false,
            area: ['50%', '50%'], //宽高
            title: false, //不显示标题
            content: $('#updateBox'),
            cancel: function () {
                document.getElementById("updateBox").style.display = "none";
            }

        });

        //表单初始赋值
        layui.use('form', function () {
            var form = layui.form;
            form.val('updateVer', {
                "updateName": name,
                "updaterVer": ver,
            })

        })


    }

    //保存版本信息
    function saveVersion() {
        vname = $name = $("#updateName").val();
        vver = $ver = $("#updaterVer").val();
        if ($name.length > 0 && $ver.length > 0) {
            $.ajax({
                type: 'post',
                cache: "false",
                url: startInter,
                data: {
                    "action": "editVersion",
                    "id": vid,
                    "name": vname,
                    "ver": vver,
                }
                , dataType: "json",
                success: function (res) {
                    if (res.code == 0) {
                        layer.msg('成功保存！', {time: 5000, icon: 6});
                        $("#updateBox").css({"display": "none"});
                        parent.layer.close(personWin);
                        getStartUp();
                    }
                    else {
                        layer.msg(res.msg);
                    }
                },
                error: function (res) {
                    layer.msg('保存失败！', {time: 5000, icon: 0});
                }
            })
        }
        else {
            layer.msg("还有必填项没有填哦！");
        }
    }
    //删除版本信息
    function delVersion(delId) {
        $.ajax({
            type: 'post',
            cache: "false",
            url: startInter,
            data: {
                "action": "deleteVersion",
                "id": delId,

            }
            , dataType: "json",
            success: function (res) {
                if (res.code == 0) {
                    layer.msg("成功删除");
                    getStartUp();
                }
                else {
                    layer.msg(res.msg);
                }

            },
            error: function (res) {
                layer.msg("操作失败");
            }


        })
    }

</script>
<!--//有效时间-->
<script type="text/html" id="createTime">
    <a style="color: #787878" class="layui-table-link">{{to_date(d.newCreate)}}</a>
</script>